<template>
  <el-dialog v-model="show" :title="title" width="1000px">
    <div class="flexBox agCenter">
      <el-avatar :size="80" :src="venue.venueLogo" style="margin-right: 20px;"/>
      <div>
        <span>营业时间</span>
        {{ venue.businessPeriod }}
      </div>
    </div>
    <div>
      <div class="tagbox">
        <el-tag
          v-for="p in venue.projectList"
          :key="p.id"
          class="mr-10"
          type="warning"
          >{{ p.projectName }}</el-tag
        >
      </div>
      <p>场馆电话：{{ venue.venueTelno }}</p>
      <p>地址：{{ venue.venueAddress }}</p>
      <div class="tagbox">
        <el-tag
          v-if="venue.trainFlag == '1'"
          class="mr-10"
          effect="plain"
          type="warning"
          >培训</el-tag
        >
      </div>
      <div class="flexBox justifyBetween">
        <el-carousel
          v-if="venue?.venuePicArr?.length > 0"
          height="300px"
          style="background: #eee; width: 600px"
        >
          <el-carousel-item v-for="item in venue.venuePicArr" :key="item">
            <img class="venueImg" :src="item" />
          </el-carousel-item>
        </el-carousel>
        <div id="map" />
      </div>

      <el-collapse>
        <el-collapse-item title="场馆公告" name="1">
          <div v-html="venue.notice" />
        </el-collapse-item>
        <el-collapse-item title="场馆设施" name="2">
          <div class="sheshi">
            <div>
              <img
                v-if="venue.trainFlag == '1'"
                src="@/assets/pc/cg_btn01.png"
              />
              <img v-else src="@/assets/pc/cg_btn01_g.png" />
              <span v-if="venue.trainFlag == '1'">培训</span>
              <span v-else style="color: #999">培训</span>
            </div>
            <div>
              <img
                v-if="venue.wifiFlag == '1'"
                src="@/assets/pc/cg_btn02.png"
              />
              <img v-else src="@/assets/pc/cg_btn02_g.png" />
              <span v-if="venue.wifiFlag == '1'">WIFI</span>
              <span v-else style="color: #999">WIFI</span>
            </div>
            <div>
              <img
                v-if="venue.marketFlag == '1'"
                src="@/assets/pc/cg_btn03.png"
              />
              <img v-else src="@/assets/pc/cg_btn03_g.png" />
              <span v-if="venue.marketFlag == '1'">超市</span>
              <span v-else style="color: #999">超市</span>
            </div>
            <div>
              <img
                v-if="venue.parkFlag == '1'"
                src="@/assets/pc/cg_btn04.png"
              />
              <img v-else src="@/assets/pc/cg_btn04_g.png" />
              <span v-if="venue.parkFlag == '1'">停车</span>
              <span v-else style="color: #999">停车</span>

            </div>
            <div>
              <img
                v-if="venue.showerFlag == '1'"
                src="@/assets/pc/cg_btn05.png"
              />
              <img src="@/assets/pc/cg_btn05_g.png" />
              <span v-if="venue.showerFlag == '1'">淋浴</span>
              <span v-else style="color: #999">淋浴</span>

            </div>
            <div>
              <img
                v-if="venue.trainFlag == '1'"
                src="@/assets/pc/cg_btn06.png"
              />
              <img v-else src="@/assets/pc/cg_btn06_g.png" />
              <span v-if="venue.trainFlag == '1'">散客</span>
              <span v-else style="color: #999">散客</span>

            </div>
            <div>
              <img
                v-if="venue.invoiceFlag == '1'"
                src="@/assets/pc/cg_btn07.png"
              />
              <img v-else src="@/assets/pc/cg_btn07_g.png" />
              <span v-if="venue.invoiceFlag == '1'">发票</span>
              <span v-else style="color: #999">发票</span>

            </div>
            <div>
              <img
                v-if="venue.memberCardFlag == '1'"
                src="@/assets/pc/cg_btn08.png"
              />
              <img v-else src="@/assets/pc/cg_btn08_g.png" />
              <span v-if="venue.memberCardFlag == '1'">会员卡</span>
              <span v-else style="color: #999">会员卡</span>

            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="场馆介绍" name="3">
          <div v-html="venue.introdution" />
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-dialog>
</template>

<script setup>
import { reactive, toRefs, watch } from "vue";
import { getCurrentInstance, onMounted } from "@vue/runtime-core";
import * as match from "@/api/match/pc";

const { proxy } = getCurrentInstance();
const data = reactive({
  show: false,
  title: "场馆详情",
  venueId: "",
  venue: {},
  loading: true,
});
const { show, title, venueId, venue, loading } = toRefs(data);
onMounted(() => {});
watch(show, (value) => {
  if (!value) {
    map.destroy();
    venue.value = {};
  }
});
const open = (params) => {
  show.value = true;
  title.value = params.title;
  venueId.value = params.id;
  getDetail(venueId.value);
};
defineExpose({
  open,
});
const getDetail = (id) => {
  match.getVenueDetail(id).then((res) => {
    venue.value = res.data;
    if (venue.value.venuePic) {
      venue.value.venuePicArr = venue.value.venuePic.split(",");
    }
    if (venue.value.lal) {
      venue.value.lalArr = venue.value.lal.split(",");
      initMap();
    }

    loading.value = false;
  });
};

let map;
const initMap = () => {
  const center = new window.TMap.LatLng(
    venue.value.lalArr[0],
    venue.value.lalArr[1]
  );
  map = new window.TMap.Map(document.getElementById("map"), {
    center: center, // 设置地图中心点坐标
    zoom: 15, // 设置地图缩放级别
    pitch: 43.5, // 设置俯仰角
    rotation: 45, // 设置地图旋转角度
  });
  const markerLayer = new window.TMap.MultiMarker({
    map: map, // 指定地图容器
    // 点标记数据数组
    geometries: [
      {
        id: "1", // 点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
        position: new window.TMap.LatLng(
          venue.value.lalArr[0],
          venue.value.lalArr[1]
        ), // 点标记坐标位置
        properties: {
          // 自定义属性
          title: venue.value.venueName,
        },
      },
    ],
  });
};
</script>

<style scoped>
#map {
  height: 300px;
  width: 340px;
}
.venueImg {
  width: 100%;
}
</style>
